/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");

:host {
  display: block;
}

:host.invalid.show-errors {
  &.update-on-submit.submitted::ng-deep,
  &.update-on-blur.dirty::ng-deep,
  &.update-on-change.dirty::ng-deep,
  &.update-on-blur.touched::ng-deep,
  &.update-on-change.touched::ng-deep {
    & input {
      background-color: var(--color-red10);
      border-color: var(--color-red);

      &:read-only {
        border-color: var(--color-white);
      }

      &:focus {
        border-radius: 3px;
        outline: 0;
      }
    }
  }
}

:host.invalid.show-errors:focus-within {
  &.update-on-submit.submitted::ng-deep,
  &.update-on-blur.dirty::ng-deep,
  &.update-on-change.dirty::ng-deep,
  &.update-on-blur.touched::ng-deep,
  &.update-on-change.touched::ng-deep {
    & input {
      background-color: var(--color-white);
    }
  }
}

:host(.readonly) {
  & .input-label {
    @mixin font-paragraph;

    color: var(--color-gray80);
    cursor: unset;
  }
}

:host::ng-deep {
  & .input-label-container {
    display: flex;
    justify-content: space-between;
  }

  & .input-container {
    display: flex;
    max-inline-size: 100%;
    position: relative;
  }

  & .icon {
    block-size: 1rem;
    color: var(--color-secondary);
    inline-size: 1rem;
  }

  & .password-visibility {
    & tui-svg {
      block-size: 1rem;
      color: var(--color-gray80);
      display: block;
      inline-size: 1rem;
    }
  }

  & .has-icon {
    & .icon,
    & .password-visibility {
      inset-block-start: var(--spacing-8);
      inset-inline-end: var(--spacing-8);
      position: absolute;
    }

    & input {
      padding-inline-end: var(--spacing-28);
    }
  }

  & input {
    block-size: 2rem;
    border: solid 2px var(--color-gray40);
    border-radius: 3px;
    flex-basis: 100%;
    margin-block-end: var(--spacing-4);
    min-inline-size: 0;
    padding-block: var(--spacing-8);
    padding-inline: var(--spacing-12);

    &:focus {
      border-color: var(--color-secondary);
      border-radius: 3px;
      outline: 0;
    }

    &:read-only {
      background: var(--color-gray10);
      border-color: var(--color-gray10);
      color: var(--color-gray100);
      pointer-events: none;
    }

    &.password-hidden {
      letter-spacing: 2px;
    }

    &[type="search"]::-webkit-search-decoration,
    &[type="search"]::-webkit-search-cancel-button,
    &[type="search"]::-webkit-search-results-button,
    &[type="search"]::-webkit-search-results-decoration {
      display: none;
    }
  }

  & .extra-info {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
